<template>
  <div class="guide-index">
    <h3>常用组件示例</h3>
    <el-collapse v-model="activeNames" :accordion="true">
      <el-collapse-item v-for="(item, index) in components" :key="index" :name="index+''">
        <template slot="title">
          {{ item.title }}
        </template>
        <div>{{ item.content }}</div>
      </el-collapse-item>

    </el-collapse>

  </div>
</template>

<script>

export default {
  data() {
    return {
      activeNames: ['0'],
      components: [
        { title: '分页组件-Pagination 具体使用参考自定义表格一',
          content: '<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="queryList" />'
        }, {
          title: '可拖拽可全屏弹窗组件-Udialog 具体使用参考自定义表格一',
          content: '<add-dialog ref="addDialog" :dialog="addDialog" @update="queryList" />'
        }

      ]
    }
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style lang="scss">
.guide-index {
  padding:0 30px;

  .el-collapse-item__header {
    font-size:16px;  padding-left:20px;
    &.is-active { }
  }

  .el-collapse-item__content {
    padding-left:20px;  font-size: 14px; line-height: 2.4em;
    span { display: inline-block;}
    p { display: inline-block; }
  }
}
</style>
